 /*
 * @description: 商家举证弹窗
 * @Author: along
 * @Date: 2019-07-29
 * @Last Modified by: along
 * @Last Modified time: 2020-07-29
 */
<template>
    <div class="disputDialog">
        <el-dialog
            :title="title"
            :visible.sync="disputDialog"
            width="640px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
                :label-position="'top'"
            >
                <el-form-item
                    label="申诉说明"
                    prop="reson"
                >
                    <el-input
                        type="textarea"
                        v-model="ruleForm.reson"
                        maxlength="140"
                        show-word-limit
                        placeholder="请输入申诉内容"
                        :autosize="{ minRows: 5, maxRows: 7}"
                        :style="{width: '520px'}"
                    />
                </el-form-item>
                <el-form-item
                    label="上传凭证"
                    prop="url"
                >
                    <div class="wrap-price">
                        <div
                            v-if="ruleForm.url.length > 0"
                            :style="{display: 'flex'}"
                        >
                            <div
                                v-for="(item,index) in ruleForm.url"
                                :key="index"
                                class="wrap-list"
                            >
                                <img
                                    :src="item"
                                    class="wrap-image"
                                >
                                <div class="wrap-action">
                                    <i
                                        class="el-icon-zoom-in"
                                        @click="fnPrevieImage(index)"
                                    />
                                    <i
                                        class="el-icon-delete"
                                        @click="fnDeleteImage(index)"
                                    />
                                </div>
                            </div>
                        </div>
                        <el-upload
                            v-if="ruleForm.url.length < 5"
                            class="avatar-uploader-thumb"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :show-file-list="false"
                            :http-request="fnUploadImageOfGoods"
                            :before-upload="beforeAvatarUpload"
                            :on-exceed="handleExceed"
                            accept="image/*"
                            :multiple="true"
                            :limit="6"
                        >
                            <template>
                                <i class="el-icon-plus" />
                            </template>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="disputDialog = false"
                    size="small"
                    :style="{width: '120px', height: '36px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="small"
                    :style="{width: '120px', height: '36px', marginLeft: '32px'}"
                    @click="submitForm('ruleForm')"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    name: 'DisputeDialog',
    components: {
        imgPreview
    },
    props: {
        title: {
            type: String,
            default: () => {}
        }
    },
    watch: {
        disputDialog (val) {
            if(!val) {
                this.$refs['ruleForm'].resetFields();
            }
        }
    },
    data () {
        return {
            disputDialog: false,
            ruleForm: {
                reson: '',
                url: []
            },
            rules: {
                reson: [
                    { required: true, message: '请输入申诉内容', trigger: 'change' }
                ],
                url: [
                    { required: true, message: '请上传凭证', trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        /**
         * @description: 提交数据
         */
        submitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$emit('getData', JSON.stringify(this.ruleForm));
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * @description: 打开弹窗
         */
        show () {
            this.disputDialog = true;
        },

        /**
         * @description: 关闭弹窗
         */
        hide () {
            this.disputDialog = false;
        },

        /**
         * @description: 预览图片
         */
        fnPrevieImage (index) {
            this.$refs.preview.show(this.ruleForm.url, index);
        },

        /**
         * @description: 删除图片
         */
        fnDeleteImage (index) {
            this.ruleForm.url.splice(index, 1);
        },

        /**
         * @description: 上传图片后逻辑处理
         */
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {
                if(this.ruleForm.url.length === 5) {
                    this.$notify({
                        title: '提示',
                        message: '最多只可以上传5张',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }
                this.ruleForm.url = this.ruleForm.url.concat([
                    resp.data.url
                ]);
                console.log(this.ruleForm.url, 'url');
            }, (error) => {
                this.$notify({
                    title: '提示',
                    message: error.msg,
                    type: 'warning',
                    duration: 2000
                });
            });
        },

        /**
         * @description: 超出上传个数
         */
        handleExceed (files) {
            console.log(Object.keys(files).length);
            if(Object.keys(files).length > 5) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以上传5张',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
        },

        /**
         * @description: 上传图片限制
         * @param {Object}  文件钩子
         */
        beforeAvatarUpload(file, fileList) {
            let type = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'],
                size = 1048576,
                isType = type.includes(file.type),
                isLt1M = file.size < size;

            if(!isType) {
                this.$notify({
                    title: '提示',
                    message: '仅可上传JPG、PNG、JPEG、GIF格式的图片',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(!isLt1M) {
                this.$notify({
                    title: '提示',
                    message: '上传头像图片大小不能超过1MB',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt1M;
        },

        /**
         * @description: 上传图片函数
         */
        fnUploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('image', e.file);
            this.$upload('/Upload/image', pic).then(resp => {
                if (resp.code == 1) {
                    success(resp);
                } else {
                    error(resp);
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.disputDialog {
    .dialog-footer {
        width: 100%;
        height: 32px;
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }
    .wrap-price {
        width: 520px;
        height: 80px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .el-icon-plus {
            color: #999;
            font-size: 30px;
        }
        .wrap-list {
            width: 80px;
            height: 80px;
            overflow: hidden;
            border-radius: 4px;
            margin-right: 30px;
            position: relative;
            .wrap-image {
                width: 80px;
                height: 80px;
                border-radius: 4px;
            }
            .wrap-action {
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
                width: 80px;
                height: 80px;
                border-radius: 4px;
                background: rgba(0,0,0,.7);
                justify-content: center;
                align-items: center;
                display: none;
                i {
                    color: #ffffff;
                    font-size: 17px;
                    cursor: pointer;
                }
                .el-icon-delete {
                    margin-left: 17px;
                }
            }
            &:hover {
                .wrap-action {
                    display: flex;
                }
            }
        }
    }
}
</style>
<style lang="less">
.disputDialog {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding: 24px 60px 16px 60px;
    }
    .el-form-item__label {
        padding: 0;
    }
    .el-upload--picture-card {
        width: 80px;
        height: 80px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background:rgba(242,242,242,1);
    }
}
</style>